<template>
  <div class="answers">
    <div class="header_zx_list">
      <template v-for="title in categoryListData.data">
        <template v-for="items in categoryList" >

          <template v-if="title.key === items.category" >
            <h4 class="header_zx_personal_details">
              {{ title.label }}
            </h4>
            <ul class="header_zx_list_ul">
              <template v-for="item in msg.data.data">
                <li class="header_zx_list_item" v-if="item.category === items.category" :key="item.id"
                    @click="handleZxItemClick(item,item.level1Title)">
                  {{ item.level1Title }}
                </li>
              </template>
            </ul>
          </template>
        </template>
      </template>
    </div>
    <div class="header_zx_else_list">
      <span @click="goToPractice()"><img src="../../../assets/static/image/icon/mryl.png" alt="每日一练"/></span>
      <span @click="goToExam()"><img src="../../../assets/static/image/icon/zscs.png" alt="知识测试"/></span>
    </div>
  </div>
</template>

<script>
import getTime from '@/utils/getTime.js'
import {mapState} from "vuex";
import router from "@/router";
import AesGcm from "@/utils/aesgcm";

export default {
  name: "HeaderZX",
  data() {
    return {
      "categoryList": [],
      "categoryListData": {},
      "msg": {}
    }
  },
  computed: {
    ...mapState(['robotInfo', 'rhPlate']),
    getTimes() {
      return getTime();
    }
  },
  methods: {
    unique(array) {
      const res = new Map();
      this.categoryList = array.filter((arr) => !res.has(arr.category) && res.set(arr.category, 1));

    },
    async handleZxItemClick(item, level1Title) {
      this.$store.state.zxInitCategory = item.category;
      this.$store.state.zxInitLevel1Title = level1Title;

      await router.push('/zxNavigationPageDetail');
    },
    goToExam() {
      //获取 mx_sso_token
      const mxSsoToken = localStorage.getItem("mx_sso_token");
      MXCommon.openUrlPage(AesGcm.decrypt(process.env.VUE_APP_EXAM_URL) + mxSsoToken);
    },
    goToPractice() {
      //获取 mx_sso_token
      const mxSsoToken = localStorage.getItem("mx_sso_token");
      MXCommon.openUrlPage(AesGcm.decrypt(process.env.VUE_APP_PRACTICE_URL) + mxSsoToken);
    }
  },
  created() {
    this.msg = this.$store.state.quickNavListData;
    this.categoryListData = this.$store.state.categoryLists;
    this.unique(this.$store.state.quickNavListData.data.data);
    let temp = [];
    this.categoryListData.data.forEach(item1 => {
      this.msg.data.data.forEach(item2 => {
        if(item1.key === item2.category ){
          temp.push({'key': item1.key,'label': item2.level1Title});
        }
      })
    })
    this.$store.state.levelTitleList = temp;
  },

}
</script>

<style scoped>
@import url("~@/assets/css/homeDJHeader/HeaderZX.css");
</style>
